<template>
  <div class="notice-container" v-if="noticeList && noticeList.length > 0">
    <van-notice-bar :scrollable="false">
      <van-swipe vertical :autoplay="8000">
        <van-swipe-item class="swipe-item" v-for="(item, index) in noticeList" :key="index" :title="item.name"
          @click="onClickItem()">
          {{ item.name }}
        </van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <NewsDialog title="公告" type="table" :labels="labelList" :list="noticeList" v-if="newsBoxShow"
      @closeDialog="newsBoxShow = false" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

import NewsDialog from "../customDialog/index.vue";
const newsBoxShow = ref(false);
const labelList = [{ label: "发布日期", prop: "returnDate" },
{ label: "标题", prop: "name" },
{ label: "信息来源", prop: "source" },]
const noticeList = [
  {
    content: `山西省水利厅和山西省气象局联合发布山洪灾害气象风险预警：预计，2024年5月10日4时至5月10日9时，受强降雨影响，我省朔州北部、大同北部、运城北部可能发生山洪（蓝色预警）。请上述地区有关单位和部门加强山区河道、水库及淤地坝巡查，做好实时监测、洪水预警、险情处置和转移避险等工作；广大群众安排好生产生活，远离边山峪口，避开山洪沟道，注意防范洪水威胁。
<br/><br/><br/>发布单位：山西省水利厅 山西省气象局
<br/>制作单位：山西省水利发展中心 山西省气象台`,
    contentText: `山西省水利厅和山西省气象局联合发布山洪灾害气象风险预警：预计，2024年5月10日4时至5月10日9时，受强降雨影响，我省朔州北部、大同北部、运城北部可能发生山洪（蓝色预警）。请上述地区有关单位和部门加强山区河道、水库及淤地坝巡查，做好实时监测、洪水预警、险情处置和转移避险等工作；广大群众安排好生产生活，远离边山峪口，避开山洪沟道，注意防范洪水威胁。
发布单位：山西省水利厅 山西省气象局
制作单位：山西省水利发展中心 山西省气象台`,
    name: "杨家门大型淤地坝暴雨洪水风险预警 【2024年】第5期",
    returnDate: "2024年5月9日 20:05:52",
    source: "山西省水利厅 山西省气象局",
  },
  {
    content: `山西省水利厅和山西省气象局联合发布山洪灾害气象风险预警：预计，2024年5月6日4时至5月7日9时，受强降雨影响，我省朔州北部、大同北部、运城北部可能发生山洪（蓝色预警）。请上述地区有关单位和部门加强山区河道、水库及淤地坝巡查，做好实时监测、洪水预警、险情处置和转移避险等工作；广大群众安排好生产生活，远离边山峪口，避开山洪沟道，注意防范洪水威胁。
<br/><br/><br/>发布单位：山西省水利厅 山西省气象局
<br/>制作单位：山西省水利发展中心 山西省气象台`,
    contentText: `山西省水利厅和山西省气象局联合发布山洪灾害气象风险预警：预计，2024年5月6日4时至5月7日9时，受强降雨影响，我省朔州北部、大同北部、运城北部可能发生山洪（蓝色预警）。请上述地区有关单位和部门加强山区河道、水库及淤地坝巡查，做好实时监测、洪水预警、险情处置和转移避险等工作；广大群众安排好生产生活，远离边山峪口，避开山洪沟道，注意防范洪水威胁。
发布单位：山西省水利厅 山西省气象局
制作单位：山西省水利发展中心 山西省气象台`,
    name: "杨家门大型淤地坝暴雨洪水风险预警 【2024年】第4期",
    returnDate: "2024年5月5日 18:20:00",
    source: "山西省水利厅 山西省气象局",
  },
];

function onClickItem() {
  newsBoxShow.value = true;
}
</script>

<style lang="less" scoped>
.notice-container {
  height: 40px;
  color: #fff;
  overflow: hidden;
  // background-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 5px;
  padding: 0 5px;
  backdrop-filter: blur(10px);

  .swipe-item {
    font-size: 20px;
    text-shadow: 0 0 3px aqua;
    font-family: "PingFangBold";
    height: 40px;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }
}
</style>
